<style type="text/css">
    /*公共样式*/
    body,
    h1,
    h2,
    h3,
    h4,
    p,
    ul,
    ol,
    li,
    form,
    button,
    input,
    textarea,
    th,
    td {
        margin: 0;
        padding: 0
    }

    h1,
    h2,
    h3,
    h4 {
        font-size: 100%
    }

    ul,
    ol {
        list-style: none
    }

    a {
        text-decoration: none
    }

    a:hover {
        text-decoration: underline
    }

    img {
        border: 0
    }

    button,
    input,
    select,
    textarea {
        font-size: 100%
    }

    table {
        border-collapse: collapse;
        border-spacing: 0
    }

    /*rem*/
    html {
        /* font-size: 62.5%; */
    }

    body .mobile-page {
        /* font-size: 1.6rem; */
    }

    /*浮动*/
    .fl {
        float: left;
    }

    .fr {
        float: right;
    }

    .clearfix:after {
        content: '';
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    body {
        background-color: #F5F5F5;
    }

    .mobile-page {
        width: 240px;
        height: 270px;
        overflow-y: scroll;
    }

    .mobile-page .admin-img,
    .mobile-page .user-img {
        width: 28px;
        height: 28px;
        border-radius: 4px;
    }

    i.triangle-admin,
    i.triangle-user {
        width: 0;
        height: 0;
        position: absolute;
        top: 8px;
        display: inline-block;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
    }

    .mobile-page i.triangle-admin {
        left: 4px;
        border-right: 8px solid #fff;  
    }

    .mobile-page i.triangle-user {
        right: 4px;
        border-left: 8px solid #9EEA6A;
    }

    .mobile-page .admin-group,
    .mobile-page .user-group {
        /* padding: 6px; */
        display: flex;
    }

    .mobile-page .admin-group {
        justify-content: flex-start;
        padding-left: 8px;
    }

    .mobile-page .user-group {
        justify-content: flex-end;
    }

    .mobile-page .admin-reply,
    .mobile-page .user-reply {
        display: inline-block;
        padding: 4px;
        border-radius: 4px;
        background-color: #fff;
        margin: 0 10px 8px;
        max-width: 140px;
        word-break: break-all;
    }

    .mobile-page .admin-reply {
        box-shadow: 0px 0px 2px #ddd;
    }

    .mobile-page .user-reply {
        text-align: left;
        background-color: #9EEA6A;
        box-shadow: 0px 0px 2px #bbb;
    }

    .mobile-page .user-msg,
    .mobile-page .admin-msg {
        width: 75%;
        position: relative;
        color: black;
    }

    .mobile-page .user-msg {
        text-align: right;
    }

    #soft-keyboard {
        /* background-color: rgba(0, 0, 0, 0.1); */
        /* height: 160px; */

        padding: 0px 3px 0 3px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        /* justify-content: space-between; */
        justify-content: flex-start;
        align-items: flex-start;
    }

    .skb-key {
        border-radius: 5px;
        min-width: 18px;
        padding: 0 2px;
        margin: 2px;
        background-color: #FFF;
        text-align: center;
    }

    .skb-key.active {
        background-color: rosybrown;
    }

    #input {
        width: 240px;
        background-color: #CCC;
        position: fixed;
        top: 100px;
        color: black;
    }

    #input .title {
        text-align: center;
        width: 240px;
    }

    #passwd {
        width: 200px;
        margin: 5px 18px;
    }

    .hide {
        display: none;
    }

    *::-webkit-scrollbar {
        width: var(--scrollbar-width, 8px);
        height: var(--scrollbar-height, 6px);
    }

    *::-webkit-scrollbar-thumb {
        /* -webkit-border-radius: 5px; */
        border-radius: 5px;
        /* background: var(--scrollbar-thumb, #AECBFA); */
        /* background-color: #49596F ; */
        background-color: rgba(73, 89, 111, 0.8);
    }

    *::-webkit-scrollbar-thumb:hover {
        /* -webkit-border-radius: 5px; */
        /* background: #E9EBED; */
        background-color: rgba(73, 89, 111, 1);
    }
</style>
<div id="mobile-page" class="mobile-page">
    <div ng-repeat="msg in msgs" ng-init="$last && $emit('repeatFinished')">
        <div ng-if="msg.to == host && msg.from == 'localhost'" class="user-group">
            <div class="user-msg">
                <span class="user-reply">{{msg.msg}}</span>
                <i class="triangle-user"></i>
            </div>
            <img class="user-img" src="/app/assets/images/icon-host.png" />
        </div>
        <div ng-if="msg.from == host" class="admin-group">
            <img class="admin-img" src="/app/assets/images/icon-host.png" />
            <div class="admin-msg">
                <i class="triangle-admin"></i>
                <span class="admin-reply">{{msg.msg}}</span>
            </div>
        </div>
    </div>
    <!-- <div class="user-group">
        <div class="user-msg">
            <span class="user-reply">我要抢楼</span>
            <i class="triangle-user"></i>
        </div>
        <img class="user-img" src="/app/assets/images/icon-host.png" />
    </div>
    <div class="admin-group">
        <img class="admin-img" src="/app/assets/images/icon-host.png" />
        <div class="admin-msg">
            <i class="triangle-admin"></i>
            <span class="admin-reply">欢迎来抢楼！欢迎来抢楼！欢迎来抢楼！欢迎来抢楼！欢迎来抢楼！欢迎来抢楼！欢迎来抢楼！</span>
        </div>
    </div>
    <div class="user-group">
        <div class="user-msg">
            <span class="user-reply">我要抢楼我要抢楼我要抢楼。</span>
            <i class="triangle-user"></i>
        </div>
        <img class="user-img" src="/app/assets/images/icon-host.png" />
    </div>
    <div class="admin-group">
        <img class="admin-img" src="/app/assets/images/icon-host.png" />
        <div class="admin-msg">
            <i class="triangle-admin"></i>
            <span class="admin-reply">欢迎来抢楼！欢迎来抢楼！欢迎来抢楼！欢迎来抢楼！欢迎来抢楼！欢迎来抢楼！</span>
        </div>
    </div> -->
</div>
<div id="input" class="hide">
    <div class="title"></div>
    <input id="passwd" class="input" placeholder="{{'等待输入' | translate}}" />
    <div id="soft-keyboard" for="passwd" ok_text="确定"></div>
</div>